<template>
	<view class="__svg" :class="{'action': show}" id="__svg-score" :style="{width: size + 'px',height: size + 'px'}">
	</view>
	
</template>

<script>
	export default {
		props: {
			show: { 
				type: Boolean,
				default: false
			},
			size: {
				type: String,
				default: 'auto'
			},
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>
<script module="svgs" lang="renderjs">
	export default {
		mounted() {
			if (typeof window.svgs === 'function') {
				this.initSvgs()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/svg.js'
				script.onload = this.initsvg.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initsvg: function(e) {
				var svg = SVG().addTo('#__svg-score');
				svg.attr({
					viewBox: '0 0 1024 1024',
				});
				svg.path(
					'M512 512m-477.866667 0a477.866667 477.866667 0 1 0 955.733334 0 477.866667 477.866667 0 1 0-955.733334 0Z'
				).attr({
					class: 'score1',
				});
				svg.path(
					'M512 34.133333c176.878933 0 331.298133 96.085333 413.934933 238.933334-82.6368 142.848-237.056 238.933333-413.934933 238.933333S180.701867 415.914667 98.065067 273.066667C180.667733 130.2528 335.121067 34.133333 512 34.133333z'
				).attr({
					class: 'score2',
				});
				svg.path(
					'M496.128 691.029333l-123.562667 64.9216a34.133333 34.133333 0 0 1-49.493333-35.976533l23.552-137.557333a34.133333 34.133333 0 0 0-9.796267-30.208L236.885333 454.792533a34.133333 34.133333 0 0 1 18.944-58.231466l138.103467-20.036267a34.133333 34.133333 0 0 0 25.7024-18.705067l61.781333-125.1328a34.133333 34.133333 0 0 1 61.201067 0l61.781333 125.1328a34.133333 34.133333 0 0 0 25.668267 18.705067l138.103467 20.036267a34.133333 34.133333 0 0 1 18.944 58.231466l-99.9424 97.416534a34.133333 34.133333 0 0 0-9.8304 30.208l23.586133 137.557333a34.133333 34.133333 0 0 1-49.493333 35.976533l-123.562667-64.9216a34.133333 34.133333 0 0 0-31.744 0z'
				).attr({
					class: 'score3',
				});

			},
		}
	}
</script>

<style>

</style>
